<template>
  <div>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
      background-color="#1d1d1d" text-color="#fff" active-text-color="#ff7629">
      <el-menu-item index="1">免签封装</el-menu-item>
      <el-menu-item index="2">上传mobileconfig</el-menu-item>
    </el-menu>
    <div v-if="activeIndex == '1'">
      <div style="height:10px;"></div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm"
        style="margin-left: 20px;margin-right: 20px;padding-top:20px;border-radius:5px;">
        <el-row>
          <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
            <el-form-item label="APP名称：" prop="name">
              <el-input v-model="ruleForm.name" placeholder="请填写APP名字，建议5个字以内的中文、英文或者数字"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
            <el-form-item label="网站链接：" prop="link">
              <el-input v-model="ruleForm.link" placeholder="请您填写完整的网站链接(例如：http://www.lumayun.com)"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div style="height:10px;"></div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm"
        style="margin-left: 20px;margin-right: 20px;padding-top:20px;border-radius: 5px;">
        <el-row>
          <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
            <el-form-item label=" APP图标：" prop="icon">
              <div style="display: flex;flex-direction: row;flex-wrap: wrap;align-items: center;">
                <ossupload :type="'1'" :module="'realname'" :change="upIcoChange" :success="upIcosuccess"
                  :beforeupload="upIcoBeForeUpload">
                  <img v-if="iconImg" :src="iconImg" class="avatar" />
                  <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
                  <div v-else class="avatar-uploader-icon"><img src="/static/组 707.png" style="width:35px;" /></div>
                </ossupload>
                <div class="ml">
                  <el-button class="online" @click="goUrl('/workAppIcon', 'workAppIcon')">在线制作图标</el-button>
                  <p>200*200尺寸，小于200KB, PNG、JPG格式</p>
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
            <el-form-item label="是否全屏显示：" prop="full">
              <div v-if="ruleForm.full==1" class="isFull">
                <div class="isFull-left" @click="selectFull"><img src="/static/组 1099@2x.png" /><span
                    style="color:#FA6029;">是</span></div>
                <div class="isFull-right" @click="cancelFull"><img src="/static/组 1100@2x.png" /><span>否</span></div>
              </div>
              <div v-else class="isFull">
                <div class="isFull-left" @click="selectFull"><img src="/static/组 1100@2x.png" /><span>是</span></div>
                <div class="isFull-right" @click="cancelFull"><img src="/static/组 1099@2x.png" /><span
                    style="color:#FA6029;">否</span></div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
            <el-form-item label="是否允许删除：" prop="delete">
              <div v-if="ruleForm.delete==1" class="isFull">
                <div class="isFull-left" @click="selectDelete"><img src="/static/组 1099@2x.png" /><span
                    style="color:#FA6029;">是</span></div>
                <div class="isFull-right" @click="cancelDelete"><img src="/static/组 1100@2x.png" /><span>否</span></div>
              </div>
              <div v-else class="isFull">
                <div class="isFull-left" @click="selectDelete"><img src="/static/组 1100@2x.png" /><span>是</span></div>
                <div class="isFull-right" @click="cancelDelete"><img src="/static/组 1099@2x.png" /><span
                    style="color:#FA6029;">否</span></div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-form-item label="是否全屏显示：" prop="full">
        <el-radio-group v-model="ruleForm.full">
          <el-radio :label="1">显示</el-radio>
          <el-radio :label="-1">不显示</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label=" 是否允许删除：" prop="delete">
        <el-radio-group v-model="ruleForm.delete">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="-1">否</el-radio>
        </el-radio-group>
      </el-form-item> -->
      </el-form>
      <div style="height:10px;"></div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm"
        style="margin-left: 20px;margin-right: 20px;padding-top:20px;border-radius: 5px;">
        <el-row>
          <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
            <el-form-item label="自定义包名：" prop="nickname">
              <el-input v-model="ruleForm.nickname" placeholder="自定义包名，留空则随机生成"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
            <el-form-item label="自定义版本号：" prop="versions">
              <el-input v-model="ruleForm.versions" placeholder="自定义版本号，留空随机生成"
                oninput="value=value.replace(/^\+|[^\d]/g,'')"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-form-item label="选择有效期：" prop="date" v-show="appID === undefined">
        <el-radio-group v-model="ruleForm.date" v-for="(item, index) in price" class="datatime" :key="index"
          @change="itemCode(item)">
          <el-radio :label="item.title">{{ item.title }}<span>({{ item.price }}元)</span></el-radio>
        </el-radio-group>
      </el-form-item> -->
        <el-form-item label="选择有效期：" prop="date" v-show="appID === undefined">
          <div class="valid-date" v-for="(item,index) in price" :key="index" @click="clickPrice(item,index)"
            @mouseenter="mouseEnterPrice(index)" @mouseleave="mouseLeavePrice(index)">
            <span v-text="item.title" class="valid-date-time"></span><span v-text="item.price"
              class="valid-date-price" /><span class="valid-date-yuan">元</span>
          </div>
        </el-form-item>
        <el-row>
          <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
            <el-form-item label="封装方式：" prop="type">
              <div v-if="ruleForm.type==1" class="isFull">
                <div class="isFull-left" @click="selectType"><img src="/static/组 1099@2x.png" /><span
                    style="color:#FA6029;">普通封装</span></div>
                <div class="isFull-right" @click="cancelType"><img src="/static/组 1100@2x.png" /><span>高级封装</span></div>
              </div>
              <div v-else class="isFull">
                <div class="isFull-left" @click="selectType"><img src="/static/组 1100@2x.png" /><span>普通封装</span></div>
                <div class="isFull-right" @click="cancelType"><img src="/static/组 1099@2x.png" /><span
                    style="color:#FA6029;">高级封装</span></div>
              </div>
            </el-form-item>
            <!-- <el-form-item label="封装方式：" prop="type">
            <el-radio-group v-model="ruleForm.type">
              <el-radio :label="1">普通封装</el-radio>
              <el-radio :label="2">高级封装</el-radio>
            </el-radio-group>
          </el-form-item> -->
            <div class="expert" v-show="ruleForm.type===2">
              <ul>
                <li>IOS APP 只能打开网站首页，点击内部的链接会跳转到safari浏览器? <br>在您的网站head里添加以下script代码，可以解决此问题。<br><code>{{text}}</code>
                </li>
                <li>隐藏头部网址,<a href="/static/packApp/app.html" download="app.html"
                    style="color:#ff7226;">下载app.html文件</a>,放在网站根目录<br>此文件名称必须为app.html,不能改名
                  <br><br>如需技术支持，请联系客服，我们提供付费服务。
                </li>
              </ul>
            </div>
          </el-col>
        </el-row>
        <el-form-item class="mt20">
          <el-button type="primary" @click="submitForm('ruleForm')"><span v-show="!appID">一键开始封装</span><span
              v-show="appID">保存修改</span></el-button>
        </el-form-item>
      </el-form>
      <div style="height:10px;"></div>
    </div>
    <div v-if="activeIndex =='2'">
      <div style="height:10px;"></div>
      <el-form ref="configForm" label-width="150px" class="demo-ruleForm"
        style="margin-left: 20px;margin-right: 20px;padding-top:20px;border-radius:5px;">
        <el-row>
          <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
            <el-form-item label="APP名称：" prop="name">
              <el-input v-model="configName" placeholder="请先填写APP名字，建议5个字以内的中文、英文或者数字"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
            <el-form-item label="mobileconfig：" prop="data">
              <div style="display: flex;flex-direction: row;flex-wrap: wrap;align-items: center;" class="upconfig">
                <el-upload class="avatar-uploader" :on-success="upconfigSuccess" :before-upload="beforeupload" drag
                  action="https://api.lumayun.com/api/Nosign/mcUpload">
                  <!-- :on-change="handelChange" -->
                  <!-- :auto-upload="false" -->
                  <div class="avatar-uploader-icon">
                    <img v-if="configText==''" src="/static/组 707.png" style="width:25px;" />
                    <p v-else class="configAvatar" ref="configT">{{configText}}</p>
                  </div>
                </el-upload>
              </div>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item class="mt20">
              <el-button type="primary" @click="submitConfigForm()">上传应用
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

    </div>
  </div>
</template>

<script>
  import ossupload from "../common/OSSUpload";
  import cosuoload from "../common/COSUpload"
  export default {
    components: {
      ossupload,
      cosuoload
    },
    data() {
      return {
        text: "<script src='https://www.lumayun.com/static/js/nosafari.js'> <\/script>",
        price: [],
        getCode: "",
        endTime: "",
        iconImg: "",
        submitIcon: '', //提交的阿里云的图标地址
        configText: '',
        submitConfig: '',
        appID: "",
        priceID: "",
        labelPosition: "right",
        ruleForm: {
          name: "",
          link: "",
          icon: "",
          full: 1,
          delete: 1,
          nickname: "",
          versions: "",
          date: "一个月",
          code: 700,
          type: 1,
        },
        rules: {
          name: [{
            required: true,
            message: "请输入App名称",
            trigger: "blur"
          }],
          link: [{
            required: true,
            message: "请输入网站链接",
            trigger: "blur"
          }]
        },
        configName: '',
        update: {}, //编辑数据
        priceIndex: -1, //选中的价格索引
        activeIndex: '1',
      };
    },
    methods: {

      upIcoBeForeUpload(file) {
        const isJPG = file.raw.type === "image/jpeg";
        const isPNG = file.raw.type === "image/png";
        const isLt2M = file.size / 1024 < 200;

        if (!isJPG && !isPNG) {
          this.$message.error("上传头像图片只能是 JPG  PNG 格式!");
          return false;
        }
        // 如果该文件大于1M 则返回
        if (!isLt2M) {
          this.$message.error("上传头像图片大小不能超过 200KB!");
          return false;
        }
        return isJPG || (isPNG && isLt2M);
      },
      beforeupload(file) {
        let that = this;
        let name = file.name.substr(file.name.lastIndexOf('.') + 1);
        let isBig2M = file.size / 1024 / 1024 < 2;
        if (name != 'mobileconfig') {
          this.$message.error("上传文件只能是mobileconfig格式!");
          return false;
        }
        if (!isBig2M) {
          this.$message.error("上传文件大小不能超过 2M!");
          return false;
        }
        return true
      },
      upIcoChange(res) {
        this.iconImg = window.URL.createObjectURL(res.raw);
      },
      upIcosuccess(res) {
        this.submitIcon = res;
      },
      upconfigSuccess(res) {
        if (res.code == 1) {
          this.configText = res.url
        } else {
          this.$message.error(res.msg);
          return
        }
      },
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            var params = new FormData();
            params.append("appName", this.ruleForm.name);
            params.append("url", this.ruleForm.link);
            params.append("appIcon", this.submitIcon);
            params.append("fullScene", this.ruleForm.full);
            params.append("canDelete", this.ruleForm.delete);
            params.append("packeName", this.ruleForm.nickname);
            params.append("appNversioname", this.ruleForm.versions);
            params.append("endTime", this.ruleForm.date);
            params.append("type", this.ruleForm.type);
            let isEdit = this.$route.query.appID > 0
            if (isEdit) {
              params.append("appID", this.$route.query.appID);
              this.$post(this.API.create, params).then(res => {
                if (res.code == 1) {
                  this.$message.success("修改成功!");
                  sessionStorage.setItem("setMenuIndex_appPackaging", 1);
                  this.$router.push({
                    path: "/visaRecord",
                    name: "visaRecord"
                  });
                  location.reload();
                } else {
                  this.$message.error("修改失败!");
                }
              });
              return;
            } else {
              this.$post(this.API.create, params).then(res => {
                let data = res.data;
                this.appID = data.appID;
                if ((res.code = 1)) {
                  this.$router.push({
                    path: "/payIOsVisaFree",
                    query: {
                      code: this.getCode,
                      endTime: this.ruleForm.date,
                      appID: this.appID
                    }
                  });
                }
              });
            }
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      submitConfigForm() {
        if (this.configName == '') {
          this.$message.error("请填写软件名称!");
          return false
        }
        if (this.configText == '') {
          this.$message.error("请上传文件!");
          return false
        }
        var params = new FormData();
        params.append("appName", this.configName);
        params.append("url", this.configText);
        this.$post(this.API.mcSave, params).then(res => {
          if (res.code == 1) {
            this.goUrl('/visaRecord', 'visaRecord');
            this.$message({
              message: '恭喜你，上传成功！',
              type: 'success'
            });
          } else {
            this.$message.error("上传失败，请联系客服!");
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      goUrl(path, name) {
        this.$router.push({
          path: path,
          name: name
        });
      },
      priceList() {
        this.$post(this.API.priceList).then(res => {
          let data = res.data;
          this.price = data.list;
          this.getCode = data.list[0].code;
        });
      },
      itemCode(item) {
        // console.log(item);
        this.getCode = item.code;
      },
      selectFull() {
        this.ruleForm.full = 1;
      },
      cancelFull() {
        this.ruleForm.full = -1;
      },
      selectDelete() {
        this.ruleForm.delete = 1;
      },
      cancelDelete() {
        this.ruleForm.delete = -1;
      },
      selectType() {
        this.ruleForm.type = 1;
      },
      cancelType() {
        this.ruleForm.type = 2;
      },
      clickPrice(item, index) {
        this.getCode = item.code;
        this.priceIndex = index;
        $('.valid-date:eq(' + index + ')').css('background-color', '#ee792d');
        $('.valid-date:eq(' + index + ') span').css('color', '#fff');
        $('.valid-date:gt(' + index + ')').css('background-color', '#343434');
        $('.valid-date:gt(' + index + ') .valid-date-time').css('color', '#fff');
        $('.valid-date:gt(' + index + ') .valid-date-price').css('color', '#FA6029');
        $('.valid-date:gt(' + index + ') .valid-date-yuan').css('color', '#FA6029');
        $('.valid-date:lt(' + index + ')').css('background-color', '#343434');
        $('.valid-date:lt(' + index + ') .valid-date-time').css('color', '#fff');
        $('.valid-date:lt(' + index + ') .valid-date-price').css('color', '#FA6029');
        $('.valid-date:lt(' + index + ') .valid-date-yuan').css('color', '#FA6029');
      },
      mouseEnterPrice(index) {
        console.log('over');
        $('.valid-date:eq(' + index + ')').css('border-color', '#ee792d');
      },
      mouseLeavePrice(index) {
        if (this.priceIndex > -1 && this.getCode != '') {
          $('.valid-date:eq(' + this.priceIndex + ')').css('border-block-color', '#1d1d1d');
          $('.valid-date:gt(' + this.priceIndex + ')').css('border-color', '#1d1d1d');
          $('.valid-date:lt(' + this.priceIndex + ')').css('border-color', '#1d1d1d');
        } else {
          $('.valid-date').css('border-color', '#1d1d1d');
        }
      },
      handleSelect(key, keyPath) {
        // console.log(key, keyPath);
        this.activeIndex = key;
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      this.appID = this.$route.query.appID;
      console.log(this.appID);
      this.priceList();
      if (this.$route.query.item === undefined) {
        this.update = null;
      } else {
        this.update = JSON.parse(this.$route.query.item);
        // console.log(this.update);
        this.submitIcon = this.update.zxlogo_source
        this.ruleForm.name = this.update.nickname;
        this.ruleForm.link = this.update.web;
        this.iconImg = this.update.zxlogo;
        this.ruleForm.full = 1;
        this.ruleForm.delete = 1;
        this.ruleForm.nickname = this.update.hpackageName;
        this.ruleForm.versions = this.update.hversion;
        this.ruleForm.type = this.update.super_type;
      }
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {}
  };

</script>
<style scoped>
  .mt20 {
    margin-top: 20px;
    margin-bottom: 10px;
    padding-bottom: 10px;
  }

  .expert {
    width: 100%;
    font-family: PingFangSC-Regular, PingFang SC;
    font-size: 15px;
    margin-left: 40px;
    margin-top: -20px;
    color: #ffffff;
  }

  .expert ul li:last-child {
    margin-top: 10px;
  }

  .expert ul li {
    list-style-type: decimal;
  }

  .expert ul li span {
    color: #c72541;
  }

  div>>>.el-input__inner {
    height: 36px;
    line-height: 36px;
  }

  .avatar-uploader .el-upload {
    /* border: 1px dashed #d9d9d9; */
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    border: 1px solid #999;
    border-radius: 6px;
    background-color: #1d1d1d;
  }

  .avatar {
    width: 100px;
    height: 100px;
    display: block;
    border-radius: 4px;
  }

  div>>>input[type="file"] {
    display: none;
  }

  .upload {
    width: 100px;
    height: 100px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #e4e7ec;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .upload img {
    width: 24px;
    height: 24px;
    margin-bottom: 7px;
  }

  .upload .icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 0;
  }

  .upload span {
    height: 12px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #a6a6a6;
    line-height: 12px;
  }

  div>>>.online {
    width: 120px;
    border-radius: 4px;
    border: 1px solid #343434;
    background-color: #343434;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #fff;
    margin-top: 10px;
  }

  div>>>.el-button {
    padding: 10px 20px;
    background-image: linear-gradient(to right, #f59833, #f8570f);
    border: 0px;
  }

  p {
    height: 18px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 18px;
    margin-top: 10px;
  }

  div>>>.el-radio__input.is-checked .el-radio__inner {
    border-color: #ff720b;
    background: #ff720b;
  }

  div>>>.el-radio__input.is-checked+.el-radio__label {
    color: #ff720b;
  }

  div>>>.datatime.el-radio-group:nth-child(2) {
    margin-left: 20px;
  }

  div>>>.datatime.el-radio-group:nth-child(3) {
    margin-left: 20px;
  }

  div>>>.datatime.el-radio-group:nth-child(4) {
    margin-left: 20px;
  }

  div>>>.datatime.el-radio-group:nth-child(5) {
    margin-left: 20px;
  }

  .ml {
    margin-left: 14px;
  }

  @media (max-width: 576px) {
    div>>>.datatime.el-radio-group:nth-child(1) {
      margin-left: 20px;
    }

    .ml {
      margin-left: 0px;
    }
  }

  .isFull {
    height: 50px;
  }

  .isFull-left {
    float: left;
    cursor: pointer;
  }

  .isFull-left img {
    height: 15px;
    line-height: 15px;
  }

  .isFull-left span {
    height: 15px;
    line-height: 15px;
    margin-left: 5px;
    color: #fff;
  }

  .isFull-right {
    float: left;
    margin-left: 30px;
    cursor: pointer;
    color: #fff;
  }

  .isFull-right img {
    height: 15px;
    line-height: 15px;
  }

  .isFull-right span {
    height: 15px;
    line-height: 15px;
    margin-left: 5px;
  }

  .valid-date {
    background-color: #343434;
    border: 1px solid #1d1d1d;
    /* border-block-color: ; */
    float: left;
    width: 122px;
    box-sizing: initial;
    text-align: center;
    cursor: pointer;
    margin-right: 10px;
    border-radius: 6px;
  }

  .valid-date-time {
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    color: #fff;
  }

  .valid-date-price {
    padding-left: 3px;
    font-size: 20px;
    color: #FA6029;
  }

  .valid-date-yuan {
    font-size: 5px;
    color: #FA6029;
  }

  .demo-ruleForm {
    background-color: #1d1d1d;
  }

  .demo-ruleForm>>>.el-form-item__label {
    color: #ffffff;
  }

  .demo-ruleForm>>>.el-form-item__content .el-input .el-input__inner {
    color: #ffffff;
    border-block-color: #999;
    background-color: #1d1d1d;
  }

  .tac.el-row .el-menu-demo.el-menu.el-menu--horizontal {
    margin: 10px 20px 0px 20px;
    border: 0px;
  }

  .upconfig>>>.avatar-uploader-icon {
    height: 40px;
    min-width: 150px;
    line-height: 35px;
  }

  .uploader-icon {
    border: 1px solid #e4e7ec;
    width: 200px;
    min-height: 200px;
    border-radius: 8px;
  }

  .uploader-icon img {
    width: 100%;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  div>>>.el-upload-dragger {
    width: auto;
    height: auto;
  }

  div>>>.el-upload-list__item-name {
    display: none;
  }

  div>>>.el-upload-list.el-upload-list--text {
    display: none;
  }

  .configAvatar {
    width: 150px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

</style>
